<template>
  <div class="goods-info" v-if="Object.keys(detailinfo).length!=0">
     <div class="desc">{{detailinfo.desc}}</div>
      <div class="info-key">{{detailinfo.detailImage[0].key}}</div>
      <div class="info-list">
         <img v-for="(item, index) in detailinfo.detailImage[0].list" :key="index" :src="item" alt="">
      </div>
  </div>
</template>

<script>
export default {
  name: "GoodsInfo",
  props: {
    detailinfo: {
      type: Object,
      default() {
        {}
      }
    }
  },
  data() {
    return {
      counter: 0,
      imagesLen: 0
    };
  },
  methods: {
    imgLoad() {
      if (++this.counter == this.imagesLen) {
        this.$emit("imageLoad");
      }
    }
  },
  components: {},
  computed: {},
  watch: {
    detailinfo() {
      // 获取图片的个数
      this.imagesLen = this.detailinfo.detailImage[0].list.length;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // console.log(this.detailinfo)
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.goods-info{
  margin: 0 10px;
  .desc{
    font-size: 12px;
  }
  .info-key{
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;

  }
  .info-list{
    img{
      width: 100%;
    }
  }
}
</style>